<template>
  <div :id="`PostMain-${post.id}`" class="flex border-b py-6">
    <div>
      <img class="rounded-full max-h-[60px] cursor-pointer" width="60"
           @click="isLoggedIn(post.user)"
           :src="post.user.image">
    </div>
    <div class="pl-3 w-full px-4">
      <div class="flex items-center justify-between pb-0.5">
        <button @click="isLoggedIn(post.user)">
                    <span class="font-bold hover:underline cursor-pointer">
                      {{ post.user.name|allLowerCaseNoCaps }}
                    </span>
          <span class="text-[13px] text-light text-gray-500 pl-1 cursor-pointer">
                        {{ post.user.name }}
                    </span>
        </button>

        <button
          class="border text-[15px] px-[21px] py-0.5 border-[#F02C56] text-[#F02C56] hover:bg-[#ffeef2] font-semibold rounded-md">
          Follow
        </button>
      </div>
      <div class="text-[15px] pb-0.5 break-words md:max-w-[400px] max-w-[300px]">{{ post.text }}</div>
      <div class="text-[14px] text-gray-500 pb-0.5">#fun #cool #SuperAwesome</div>
      <div class="text-[14px] pb-0.5 flex items-center font-semibold">
        <Icon name="icon-yinle" size="17"/>
        <div class="px-1">original sound - AWESOME</div>
        <Icon name="icon-aixin" size="20"/>
      </div>

      <div class="mt-2.5 flex">
        <div
          @click="displayPost(post)"
          class="relative min-h-[480px] max-h-[580px] min-w-[260px] max-w-[260px] flex items-center bg-black rounded-xl cursor-pointer"
        >
          <video
            v-if="post.video"
            ref="video"
            loop
            muted
            class="rounded-xl object-cover mx-auto h-full"
            :src="post.video"
          />
          <img
            class="absolute right-2 bottom-6"
            width="50"
            src="~/assets/images/logo-white.png"
          >
        </div>
        <div class="relative mr-[75px]">
          <div class="absolute bottom-0 pl-2">
            <div class="pb-4 text-center">
              <button
                class="rounded-full bg-gray-200 p-2 cursor-pointer"
                @click="isLiked ? unlikePost(post) : likePost(post)"
              >
                <Icon
                  name="icon-yidianzan"
                  size="25"
                  :color="isLiked ? '#F02C56' : ''"
                />
              </button>
              <span class="text-xs text-gray-800 font-semibold">{{ post.likes.length }}</span>
            </div>

            <div class="pb-4 text-center">
              <div class="rounded-full bg-gray-200 p-2 cursor-pointer">
                <Icon name="icon-pinglun1" size="25"/>
              </div>
              <span class="text-xs text-gray-800 font-semibold">43</span>
            </div>

            <div class="text-center">
              <div class="rounded-full bg-gray-200 p-2 cursor-pointer">
                <Icon name="icon-fenxiang" size="25"/>
              </div>
              <span class="text-xs text-gray-800 font-semibold">55</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['post'],
  data() {
    return {
      video: null
    }
  },
  filters: {
    allLowerCaseNoCaps(str) {
      return str.split(' ').join('').toLowerCase()
    },
  },
  mounted() {
    this.initObserver()
  },
  methods: {
    initObserver() {
      try {
        this.video = this.$refs.video
        let observer = new IntersectionObserver((entries) => {
          if (entries[0].isIntersecting) {
            this.video && this.video.play()
          } else {
            this.video && this.video.pause()
          }

        }, {threshold: [0.6]});
        observer.observe(document.getElementById(`PostMain-${this.post.id}`));
      } catch (e) {
        console.log(e)
      }
    },
    isLoggedIn(user) {
      try {
        if (!this.$userStore.id) {
          this.$store.commit('general/change_isLoginOpen', true)
          return
        }
        setTimeout(() => this.$router.push(`/profile/${user.id}`), 200)
      } catch (e) {
        console.log(e)
      }
    },
    displayPost(post) {
      try {
        if (!this.$userStore.id) {
          this.$store.commit('general/change_isLoginOpen', true)
          return
        }
        this.$store.commit('general/setBackUrl', '/')
        this.$store.commit('general/change_selectedPost')
        setTimeout(() => this.$router.push(`/post/${post.id}`), 200)
      } catch (e) {
        console.log(e)
      }
    },
    async likePost(post) {
      if (!this.$userStore.id) {
        this.$store.commit('general/change_isLoginOpen', true)
        return
      }
      try {
        await this.$store.dispatch('user/likePost', {post})
      } catch (error) {
        console.log(error)
      }
    },
    async unlikePost(post) {
      if (!this.$userStore.id) {
        this.$store.commit('general/change_isLoginOpen', true)
        return
      }
      try {
        await this.$store.dispatch('user/unlikePost', {post: post, isPostPage: false})
      } catch (error) {
        console.log(error)
      }
    }
  },
  beforeDestroy() {
    this.video.pause()
    this.video.currentTime = 0
    this.video.src = ''
  },
  computed: {
    $generalStore() {
      return this.$store.state.general
    },
    $userStore() {
      return this.$store.state.user
    },
    isLiked() {
      let res = this.post.likes.find(like => like.user_id === this.$userStore.id)
      if (res) {
        return true
      }
      return false
    }
  }
}
</script>
